Home / AAA

AAA

import React, { useState } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; const PersonaCreator = () => { const [formData, setFormData] = useState({ name: '', slug: '', image: '', description: '', welcome_message: '', expert: '', prompt: '', temperature: '', filter_badwords: false }); const [showPreview, setShowPreview] = useState(false); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value })); }; const handleSubmit = (e) => { e.preventDefault(); setShowPreview(true); }; return (

Create Your Narrative Persona

Bring your character to life and chat with them!

Character Details

Name:

Slug:

Image URL:

Description:

</div>

<div>
                  <label className="block text-sm font-medium mb-1">Welcome Message:</label>
                  <textarea
                    name="welcome_message"
                    value={formData.welcome_message}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md h-24"
                    placeholder="Welcome Message..."
                    required
                  />
                </div>

<div>
                  <label className="block text-sm font-medium mb-1">Expertise:</label>
                  <input
                    type="text"
                    name="expert"
                    value={formData.expert}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md"
                    placeholder="What are they good at?"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium mb-1">Prompt:</label>
                  <textarea
                    name="prompt"
                    value={formData.prompt}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md h-24"
                    required
                  />
                </div>

<div>
                  <label className="block text-sm font-medium mb-1">Temperature:</label>
                  <input
                    type="number"
                    name="temperature"
                    value={formData.temperature}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md"
                    step="0.1"
                    placeholder="e.g. 0.7"
                  />
                </div>

<div className="flex items-center">
                  <input
                    type="checkbox"
                    name="filter_badwords"
                    checked={formData.filter_badwords}
                    onChange={handleChange}
                    className="mr-2"
                  />
                  <label className="text-sm">Filter bad words</label>
                </div>

<button
                  type="submit"
                  className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
                >
                  Create Persona
                </button>
              </form>
            </CardContent>
          </Card>

{showPreview && (
            <Card>
              <CardHeader>
                <CardTitle>Your Created Persona</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <h3 className="text-xl font-semibold">{formData.name}</h3>
                {formData.image && (
                  <img
                    src={formData.image}
                    alt="Persona"
                    className="max-w-[150px] rounded-md"
                  />
                )}
                <div>
                  <p className="font-medium">Description:</p>
                  <p className="text-gray-600">{formData.description}</p>
                </div>
                <div>
                  <p className="font-medium">Welcome Message:</p>
                  <p className="text-gray-600">{formData.welcome_message}</p>
                </div>
                <div>
                  <p className="font-medium">Expertise:</p>
                  <p className="text-gray-600">{formData.expert || 'N/A'}</p>
                </div>
                <div>
                  <p className="font-medium">Prompt:</p>
                  <p className="text-gray-600">{formData.prompt}</p>
                </div>
                <div>
                  <p className="font-medium">Temperature:</p>
                  <p className="text-gray-600">{formData.temperature || 'N/A'}</p>
                </div>
                <div>
                  <p className="font-medium">Filter Bad Words:</p>
                  <p className="text-gray-600">{formData.filter_badwords ? 'Yes' : 'No'}</p>
                </div>
              </CardContent>
            </Card>
          )}
        </div>

export default PersonaCreator;</body>